<template>
  <view class="content">
    <view class="title">
      <view class="name" :style="{'color': portionData.affair_color}">
        {{ portionData.affair_name }}
      </view>
      <view v-if="!portionData.is_store" class="add-btn" @click="toCreatePortion">
        +记录
      </view>
    </view>
    <view class="stat-box">
      <view class="male">
        <text class="text">♂</text>
        {{ portionStat.male }} 元
      </view>
      <view class="female">
        <text class="text">♀</text>
        {{ portionStat.female }} 元
      </view>
      <view class="total">
        合计 {{ portionStat.total }} 元
      </view>
    </view>
    <view class="protion-box">
      <view
        v-for="item,index in portionData.data"
        class="protion-row"
      >
        <view class="index">
        <text v-if="item.group_name == 'male'" class="male">♂</text>
        <text v-else class="female">♀</text>
        {{ index + 1}}、
        </view>
        <view class="date">{{ item.rec_date_str }}</view>
        <view class="name">{{ item.rec_name }}</view>
        <view v-if="item.rec_money>0" class="money">{{ (item.rec_money / 100).toFixed(2) }}元</view>
        <view class="portion">{{ item.rec_portion }}</view>
        <image v-if="!portionData.is_store" class="edit" src="/static/icons/editor.png" mode="aspectFit" @click.stop="toEditPortion(item)"></image>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { reactive } from 'vue';
  import { onLoad, onShow } from '@dcloudio/uni-app';
  import { callCloudFunction } from '@/utils/cloudfunc';
  import { dateFormat } from '@/utils';
   const portionData = reactive({
     affair_id: '',
     affair_name: '',
     affair_color: '',
     is_store: false,
     data: []
   })
   const portionStat = reactive({
     male: '',
     female: '',
     total: ''
   })
   
   onLoad((options) => {
     if (!options._id) {
       uni.navigateBack()
       return
     }
     portionData.affair_id = options._id
     // 获取该事务的记录
     // getAffairPortions()
   })
   onShow(() => {
     getAffairPortions()
   })
   
  const getAffairPortions = () => {
    callCloudFunction({
      name: 'affair-portion',
      data: {action: 'read', affair_id: portionData.affair_id}
    }).then(res => {
      // console.log('查询返回:', res);
      portionData.data = res.data.map(item => {
        item.rec_date_str = dateFormat(new Date(item.rec_date), '', true)
        return item
      })
      const affair = res.affair_data
      portionData.affair_name = affair.affair_name
      portionData.is_store = affair.is_store
      portionData.affair_color = affair.affair_color
      
      const statData = res.stat_data
      let maleTotal = 0
      let femaleTotal = 0
      let total = 0
      for (let i = 0; i < statData.length; i++) {
        let item = statData[i]
         total += item.total_money
         if (item.group_name == 'male') {
           maleTotal += item.total_money
         }
         if (item.group_name == 'female') {
           femaleTotal += item.total_money
         }
      }
      portionStat.male = Number(maleTotal / 100).toFixed(2)
      portionStat.female = Number(femaleTotal /100).toFixed(2)
      portionStat.total = Number(total / 100).toFixed(2)

      
    })
  }
  
  const toEditPortion = (rec) => {
    uni.navigateTo({
      url:'/pages/giftContact/portion/editor?_id=' + rec._id
    })
  }
  const toCreatePortion =() => {
    uni.navigateTo({
      url:'/pages/giftContact/portion/editor?affair_id=' + portionData.affair_id
    })
  }
</script>

<style lang="scss">
  .content {
    .title {
      display: flex;
      align-items: center;
      padding:10rpx 20rpx;
      .name{
        font-size: 32rpx;
        font-weight: 700;
        
      }
      .add-btn {
        margin-left: auto;
        color: $uni-color-primary;
      }
    }
    .stat-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10rpx 20rpx;
      background-color: #eee;
      .male {
        .text {
          color: $uni-color-primary; font-size: 30rpx;
          margin-right: 10rpx;font-weight: 700;
         }
      }
      .female {
        .text {
          color: $uni-color-warning; font-size: 30rpx;
          margin-right: 10rpx;font-weight: 700;
        }
      }
      .total {
        
      }
    }
    
    .protion-box {
      .protion-row {
        display: flex;
        align-items: center;
        line-height: 80rpx; 
        padding: 0 20rpx;
        border-bottom: 1px solid #eee;
        .index {
          .male {color: $uni-color-primary; font-size: 26rpx;}
          .female {color: $uni-color-warning; font-size: 26rpx;}
        }
        .date {
          margin:0 40rpx;
        }
        .name {
          flex: 1;
        }
        .money {
          margin-left: auto;
        }
        .portion {
          margin-left: 40rpx;
        }
        .edit {
         width: 40rpx;
         height:  40rpx;
         margin-left: auto;
        }
      }
    }
  }
</style>